<script setup lang="ts">
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { PropType } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  defineOptions({
    name: 'DetectDetailHeader',
  })

  const props = defineProps({
    detail: {
      type: Object as PropType<ReturnFactoryDetectDetail>,
      required: true,
    },
  })

  // 激活的路由对象
  const route = useRoute()

  // 全局路由对象
  const router = useRouter()

  // 标签状态管理
  const tagsViewStore = useTagsViewStore()

  /**
   * 返回
   */
  const onBack = () => {
    tagsViewStore.delView(route.path)
    router.back()
  }
</script>

<template>
  <div class="detect-detail-header">
    <div class="title">
      <i class="iconfont icon-detail"></i>
      <div class="text">检测单号：</div>
      <div class="return-factory-code">{{ props.detail.repairCheckNo }}</div>
      <h-status v-if="props.detail.status === 0" type="warning">待检测</h-status>
      <h-status v-else-if="props.detail.status === 1" type="primary">检测中</h-status>
      <h-status v-else-if="props.detail.status === 2" type="success">检测完成</h-status>
      <h-status v-else type="info">已取消</h-status>
    </div>
    <div class="btn-group">
      <h-button @click="onBack">返回</h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .detect-detail-header {
    display: flex;
    justify-content: space-between;

    .title {
      display: flex;
      align-items: center;
      column-gap: 5px;
      font-size: 14px;

      .iconfont {
        color: $primaryColor;
      }

      .text {
        font-weight: bold;
      }
    }

    .btn-group {
      display: flex;
      column-gap: 5px;
    }
  }
</style>
